<template>
  <div class="cate_container">
    <div class="hcate_search">
      <van-search
        shape="round"
        background="#c00000"
        placeholder="请输入搜索关键词"
        disabled
        @click="goToSearch"
      />
    </div>
    <div class="cate_list">
      <van-tree-select
        :items="cateList"
        :active-id.sync="activeId"
        :main-active-index.sync="activeIndex"
        height="calc(100vh - 120px)"
        @click-nav="clickNav"
      >
        <template #content>
          <div class="itemList" v-for="item in itemList" :key="item.id">
            <!-- 标题 -->
            <h4>/&nbsp;{{ item.text }}&nbsp;/</h4>
            <!-- item 内容 -->
            <div class="itemContent">
              <!-- 右测item个体 -->
              <div
                class="item"
                v-for="itemC in item.children"
                :key="itemC.id"
                @click="goToGoodsList(itemC)"
              >
                <img :src="itemC.cat_icon" alt="" srcset="" />
                <span> {{ itemC.text }} </span>
              </div>
            </div>
          </div>
        </template>
      </van-tree-select>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "Cate",
  data() {
    return {
      cateList: [],
      // 	右侧选中项的 id
      activeId: 1,
      // 左侧选中项的索引
      activeIndex: 0,
      // 第二级数据
      itemList: [],
    };
  },
  components: {},
  methods: {
    async getCateList() {
      if (
        JSON.parse(sessionStorage.getItem("cateList")) &&
        JSON.parse(sessionStorage.getItem("itemList"))
      ) {
        this.cateList = JSON.parse(sessionStorage.getItem("cateList"));
        // itemList 设置初始值
        this.itemList = JSON.parse(sessionStorage.getItem("itemList"));
        return;
      }
      const { data: res } = await this.$http.get("/api/public/v1/categories");
      if (res.meta.status !== 200) return Toast.fail("数据请求失败");
      // 格式化数据
      let formateData = res.message;
      formateData.map((item) => {
        item.text = item.cat_name;
        item.children.map((itemChild01) => {
          itemChild01.text = itemChild01.cat_name;
          itemChild01.id = itemChild01.cat_id;
          if (itemChild01.children) {
            itemChild01.children.map((itemChild02) => {
              itemChild02.text = itemChild02.cat_name;
              itemChild02.id = itemChild02.cat_id;
            });
          }
        });
      });
      this.cateList = formateData;
      // itemList 设置初始值
      this.itemList = this.cateList[0].children;
      // console.log(res, "cate");
      sessionStorage.setItem("cateList", JSON.stringify(formateData));
      sessionStorage.setItem(
        "itemList",
        JSON.stringify(this.cateList[0].children)
      );
    },

    goToSearch() {
      this.$router
        .push({
          name: "search",
        })
        .catch((err) => err);
    },
    goToGoodsList(item) {
      // this.$router.push(`/goodsList/${item.id}`)
      this.$router.push({
        path: `/goodsList/${item.id}`,
        query: {
          cid: item.id,
        },
      });
    },

    clickNav() {
      console.log(this.activeIndex);
      this.itemList = this.cateList[this.activeIndex].children;
      // console.log(document.getElementsByClassName('van-tree-select__content')[0].scrollTop);
      // 重置滚动距离
      document.getElementsByClassName(
        "van-tree-select__content"
      )[0].scrollTop = 0;
    },
  },
  created() {
    this.getCateList();
  },
};
</script>

<style lang="less" scoped>
.cate_container {
  .itemList {
    h4 {
      box-sizing: border-box;
      margin: 5px 0;
    }
    .itemContent {
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 3rem;
        text-align: center;
        margin: 2px 9px;
        img {
          width: 3rem;
          height: 3rem;
        }
        span {
          font-size: 12px;
        }
      }
    }
  }
}
</style>